<script setup>
import { ShoppingOutlined, AimOutlined, DeleteColumnOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { ref, reactive, nextTick } from 'vue';
import basicPage from '@/views/user/components/basicPage.vue'
import securityPage from './components/securityPage.vue';
import customPage from './components/customPage.vue';
import bindingPage from './components/bindingPage.vue';
import notificationPage from './components/notificationPage.vue';

const inputRef = ref();
const state = reactive({
  tags: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
  inputVisible: false,
  inputValue: '',
});
const handleClose = removedTag => {
  const tags = state.tags.filter(tag => tag !== removedTag);
  console.log(tags);
  state.tags = tags;
};
const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
const handleInputConfirm = () => {
  const inputValue = state.inputValue;
  let tags = state.tags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  Object.assign(state, {
    tags,
    inputVisible: false,
    inputValue: '',
  });
};

// 右边卡片菜单
// const tabListNoTitle = [
// {
//   key: 'article',
//     tab: '文章'
// },
// {
//   key: 'application',
//     tab: '应用'
// },
// {
//   key: 'project',
//     tab: '项目'
// }
// ]
// const key = ref('application');
// const onTabChange = (value) => {
//   key.value = value;
// };

// const cardList = ref([
//   {
//     src: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/samantha/logo-icon-white-bg.png',
//     active: 18,
//     add: 1900
//   },
//   {
//     src: 'https://next.antdv.com/assets/logo.1ef800a8.svg',
//     active: 15,
//     add: 1700
//   },
//   {
//     src: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//     active: 11,
//     add: 1600
//   },
//   {
//     src: 'https://ts3.tc.mm.bing.net/th/id/ODLS.6eea1d12-b60f-4447-80a1-c259f721da24?w=17&h=17&o=6&pid=1.2',
//     active: 12,
//     add: 1560
//   },
//   {
//     src: 'https://ts3.tc.mm.bing.net/th/id/ODLS.6eea1d12-b60f-4447-80a1-c259f721da24?w=17&h=17&o=6&pid=1.2',
//     active: 22,
//     add: 1100
//   },
//   {
//     src: 'https://ts4.tc.mm.bing.net/th/id/ODLS.281ecba3-e006-4314-9583-6844dcc8ef0c?w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2',
//     active: 28,
//     add: 1450
//   },
//   {
//     src: 'https://ts2.tc.mm.bing.net/th/id/ODLS.a2d7f4f1-5e5f-4f8d-b843-ee82f04f112b?w=32&h=32&qlt=95&pcl=fffffa&o=6&pid=1.2',
//     active: 18,
//     add: 1900
//   },
//   {
//     src: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/samantha/logo-icon-white-bg.png',
//     active: 18,
//     add: 1900
//   },
//   {
//     src: 'https://next.antdv.com/assets/logo.1ef800a8.svg',
//     active: 15,
//     add: 1700
//   },
//   {
//     src: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//     active: 11,
//     add: 1600
//   },
//   {
//     src: 'https://ts3.tc.mm.bing.net/th/id/ODLS.6eea1d12-b60f-4447-80a1-c259f721da24?w=17&h=17&o=6&pid=1.2',
//     active: 12,
//     add: 1560
//   },
//   {
//     src: 'https://ts3.tc.mm.bing.net/th/id/ODLS.6eea1d12-b60f-4447-80a1-c259f721da24?w=17&h=17&o=6&pid=1.2',
//     active: 22,
//     add: 1100
//   },
//   {
//     src: 'https://ts4.tc.mm.bing.net/th/id/ODLS.281ecba3-e006-4314-9583-6844dcc8ef0c?w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2',
//     active: 28,
//     add: 1450
//   },
//   {
//     src: 'https://ts2.tc.mm.bing.net/th/id/ODLS.a2d7f4f1-5e5f-4f8d-b843-ee82f04f112b?w=32&h=32&qlt=95&pcl=fffffa&o=6&pid=1.2',
//     active: 18,
//     add: 1900
//   }
// ])





// 右边卡片
const activeKey = ref('basic')
const tabs = [
  {
    key: 'basic',
    tab: '基础设置'
  },
  {
    key: 'security',
    tab: '安全设置'
  },
  {
    key: 'custom',
    tab: '个性化'
  },
  {
    key: 'binding',
    tab: '账号绑定'
  },
  {
    key: 'notification',
    tab: '新消息通知'
  },
]

</script>

<template>
  <div class="centerPage">
    <a-card class="left">
      <div class="pic">
        <a-space direction="vertical" :size="4">
          <img src="https://preview.pro.antdv.com/avatar2.jpg" alt="">
          <p style="font-size: 20px;">天野远子</p>
          <p>海纳百川，有容乃大</p>
        </a-space>
      </div>
      <div class="introduct">
        <p>
          <ShoppingOutlined />
          <span>
            交互专家
          </span>
        </p>
        <p>
          <DeleteColumnOutlined />
          <span>
            蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
          </span>
        </p>
        <p>
          <AimOutlined />
          <span>
            浙江省杭州市
          </span>
        </p>
      </div>
      <a-divider />
      <!-- 标签 -->
      <div class="tag">
        <p>标签</p>
        <a-space size="small" wrap>
          <template v-for="(tag, index) in state.tags" :key="tag">
            <a-tooltip v-if="tag.length > 20" :title="tag">
              <a-tag :closable="index !== 0" @close="handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag v-else :closable="index !== 0" @close="handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input v-if="state.inputVisible" ref="inputRef" v-model:value="state.inputValue" type="text" size="small"
            :style="{ width: '78px' }" @blur="handleInputConfirm" @keyup.enter="handleInputConfirm" />
          <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
            <plus-outlined />
            New Tag
          </a-tag>
        </a-space>

      </div>
      <a-divider />
      <div class="group">
        <p>团队</p>
        <a-row :gutter="[{ xs: 2, sm: 4, md: 6, lg: 16 }, { xs: 2, sm: 4, md: 8, lg: 24 }]">
          <a-col :span="12">
            <a class="user">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" alt="">
              <span>科学搬砖组</span>
            </a>
          </a-col>
          <a-col :span="12">
            <a class="user">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png" alt="">
              <span>程序员日常</span>
            </a>
          </a-col>
          <a-col :span="12">
            <a class="user">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png" alt="">
              <span>设计天团</span>
            </a>
          </a-col>
          <a-col :span="12">
            <a class="user">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png" alt="">
              <span>中二少女团</span>
            </a>
          </a-col>
          <a-col :span="12">
            <a class="user">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png" alt="">
              <span>骗你学计算机</span>
            </a>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <a-card class="right">
      <a-tabs v-model:activeKey="activeKey" tab-position="left">
        <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.tab">
          <basicPage v-if="item.key === 'basic'"></basicPage>
          <securityPage v-if="item.key === 'security'"></securityPage>
          <customPage v-if="item.key === 'custom'"></customPage>
          <bindingPage v-if="item.key === 'binding'"></bindingPage>
          <notificationPage v-if="item.key === 'notification'"></notificationPage>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<style scoped lang="less">
.centerPage {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 25px;

  .left {
    height: 700px;
    padding: 24px;
    flex: 1 1 500px;

    :deep(.ant-card-body) {
      padding: 0px;

      .pic {
        text-align: center;
        margin-bottom: 24px;

        img {
          width: 104px;
          height: 104px;
          border-radius: 50%;
          margin-bottom: 4px;
        }

        p {
          margin-bottom: 4px;
        }
      }

      .introduct {
        font-size: 14px;
        color: #000000A6;
      }

      .group {
        .user {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: rgb(89, 89, 89);

          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 5px;
          }

          &:hover {
            color: rgb(24, 144, 255);
          }
        }
      }
    }

  }

  .right {
    flex: 1 1 1251px;
    min-height: 272px;
  }

  // .right {
  //   flex: 1 1 1251px;
  //   // height: 918px;

  //   .littleCard {
  //     width: 340px;
  //     height: 200px;

  //     .littleCardTop {
  //       margin-bottom: 10px;
  //     }

  //     .littleCardMiddle {
  //       display: flex;
  //       justify-content: center;

  //       p {
  //         margin-bottom: 5px;
  //       }

  //       .blod {
  //         font-size: 24px;
  //         color: #00000073;
  //       }
  //     }

  //     :deep(.ant-card-actions) {
  //       background-color: rgb(250, 250, 250);
  //     }
  //   }

  // }
}
</style>
